<template>
  <div class="contain">
    <!--<div class="order-tab">-->
      <!--<div class="item" :class="type==1?'active':''" @click="choose(1)"><div class="item-type"><div>未使用</div><div class="tab-line"></div></div></div>-->
      <!--<div class="item" :class="type==2?'active':''" @click="choose(2)"><div class="item-type"><div>已使用</div><div class="tab-line"></div></div></div>-->
      <!--<div class="item" :class="type==3?'active':''" @click="choose(3)"><div class="item-type"><div>已过期</div><div class="tab-line"></div></div></div>-->
    <!--</div>-->
    <scroller
      ref="redscroll"
      :on-refresh="refresh"
      :on-infinite="infinite">
      <div class="content">
        <div class="red-item" v-for="packet in redPacketList">
          <div class="top">
            <img class="tip" src="./../../../assets/img/user/shiyong.png" v-if="packet.state==1">
            <img class="tip" src="./../../../assets/img/user/guoqi.png" v-if="packet.state==2">
            <div class="left">
              <div class="img"><img :src="packet.sellerLogo?packet.sellerLogo:require('./../../../assets/img/user/shiyong.png')"></div>
              <div class="img-right">
                <div class="title">{{packet.sellerName}}</div>
                <div class="limit-time">限用日期:{{packet.beginDate | formatDate}}至{{packet.endDate | formatDate}}</div>
              </div>
            </div>
            <div class="right">
              <div class="price"><span>¥</span>{{packet.value}}</div>
              <div class="limit" v-if="packet.orderAmount>0">满{{packet.orderAmount}}可用</div>
            </div>
          </div>
          <div class="center"><img src="./../../../assets/img/user/ditu.png"></div>
          <div class="bottom">
            <div class="shuoming">我是使用规则，我是使用规则我是使用规则，我是使用规则，我是使用规则我是使用规则。</div>
            <div class="use">去使用</div>
          </div>
        </div>

        <div class="red-item opacity">
          <div class="top">
            <img class="tip" src="./../../../assets/img/user/shiyong.png">
            <div class="left">
              <div class="img"><img src="./../../../assets/img/user/shiyong.png"></div>
              <div class="img-right">
                <div class="title">大唐美使馆</div>
                <div class="limit-time">限用日期:2019.1至2019</div>
              </div>
            </div>
            <div class="right">
              <div class="price"><span>¥</span>10</div>
              <div class="limit">满158可用</div>
            </div>
          </div>
          <div class="center"><img src="./../../../assets/img/user/ditu.png"></div>
          <div class="bottom">
            <div class="shuoming">我是使用规则，我是使用规则我是使用规则，我是使用规则，我是使用规则我是使用规则。</div>
            <div class="use">去使用</div>
          </div>
        </div>
      </div>
    </scroller>
  </div>
</template>
<!--<script src="./myRedPacket.js"></script>-->

<script>
  import {formatDate} from '../../../common/date.js';
  export default {
    name: "myRedPacket",
    components: {},
    filters: {
      formatDate(time) {
        let date = new Date(time.replace(/-/g, "/"));
        return formatDate(date, 'yyyy.MM.dd');
      }
    },
    data() {
      return {
        type:1,
        page:1,
        redPacketList:[],
        hasNext:true
      }
    },
    methods: {
      choose(type){
        this.type=type
        this.refresh()
      },
      refresh(){
        // console.log("refresh")
        this.hasNext=true;
        this.page=1;
        this.initData(0);
      },
      infinite(){
        // console.log("infinite")
        if(this.hasNext){
          this.page++;
          this.initData(1);
        }else{
          this.$refs.redscroll&&this.$refs.redscroll.finishInfinite(true)
        }
      },
      initData(type){
        this.$ajax.get("user/list/red_packet",(res) => {
          if(res.code==200){
            if(type==0){
              this.redPacketList=res.data;
            }else{
              this.redPacketList=this.redPacketList.concat(res.data);
            }

            type==0&&this.$refs.redscroll&&this.$refs.redscroll.finishPullToRefresh();
            if(res.data&&res.data.length<this.$rows||res.data==undefined){
              this.hasNext=false;
              type==1&&this.$refs.redscroll&&this.$refs.redscroll.finishInfinite(true);
            }else{
              this.hasNext=true;
              type==1&&this.$refs.redscroll&&this.$refs.redscroll.finishInfinite(false);
            }
          }else{
            this.$vux.toast.text(res.msg, 'center');
            type==0&&this.$refs.redscroll&&this.$refs.redscroll.finishPullToRefresh();
            type==1&&this.$refs.redscroll&&this.$refs.redscroll.finishInfinite(false);
          }
        },{pageNo :this.page,pageSize:this.$rows,state:this.type});
      },
      androidCallJs (str) {
        let obj=this.$getJson(str)
        if (obj&&obj.msg != '') {

        }
      }
    },
    mounted: function () {
      // if(this.$route.query.from=="app"){
      //   window['androidCallJs'] = (val) => {
      //     this.androidCallJs()
      //   }
      // }
    }
  }

</script>
<style lang="less" scoped>
  .active{
    font-size:.28rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(34,34,34,1);
    .tab-line{
      width:.6rem;
      height:.04rem;
      background:#527DD9;
      border-radius:1px;
      margin-top: .3rem;
    }
  }
  .contain{
    display: flex;
    flex-direction: column;
    background-color: #F5F5F5;
    width:100%;
    height: 100%;
    .order-tab{
      display: flex;
      align-items: flex-start;
      flex-direction:row;
      background-color: #fff;
      font-size:.28rem;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(153,153,153,1);
      .item{
        margin-top: 20px;
        flex:1;
        display: flex;
        justify-content: center;
        .item-type{
          display: flex;
          flex-direction: column;
          width:fit-content;
          width:-moz-fit-content;
          text-align: center;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .content{
      line-height: .22rem;
      .opacity{
        opacity:0.5;
      }
      .red-item{
        /*background-color: #fff;*/
        margin: .3rem .3rem 0rem .3rem;
        border-radius:.1rem;
        .top{
          border-top-left-radius: .1rem;
          border-top-right-radius: .1rem;
          position: relative;
          padding: .3rem .4rem .2rem .4rem;
          line-height: .44rem;
          background-color: #fff;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .tip{
            position: absolute;
            right: 0px;
            top:0px;
            width:1.06rem;
            height:1.06rem;
          }
          .left{
            display: flex;
            flex-direction: row;
            .img{
              border-radius:.1rem;
              width:1.14rem;
              height: 1.14rem;
              img{
                width:100%;
              }
            }
            .img-right{
              margin-left: .15rem;
              display: flex;
              flex-direction: column;
              .title{
                flex:1;
                font-size:.28rem;
                font-family:PingFang-SC-Bold;
                font-weight:bold;
                color:rgba(51,51,51,1);
              }
              .limit-time{
                flex:1;
                display: flex;
                align-items: flex-end;
                font-size:.22rem;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(102,102,102,1);
              }
            }
          }
          .right{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .price{
              font-size:.6rem;
              font-family:HelveticaNeueLTStd-Roman;
              font-weight:normal;
              color:rgba(251,110,82,1);
              span{
                font-size: .28rem;
              }
            }
            .limit{
              font-size:.22rem;
              font-family:PingFang-SC-Medium;
              font-weight:500;
              color:rgba(102,102,102,1);
            }
          }
        }
        .bottom{
          background-color: #fff;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          border-bottom-left-radius: .1rem;
          border-bottom-right-radius: .1rem;
          padding: .2rem .4rem;
          .shuoming{
            width:4.39rem;
            font-size:.2rem;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(153,153,153,1);
            line-height:.24rem;
          }
          .use{
            /*flex:1;*/
            background:rgba(251,110,82,1);
            border-radius:21px;
            padding: 0rem .3rem;
            font-size:.24rem;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(255,255,255,1);
            line-height:.44rem;

          }
        }
        .center{
          height: .22rem;
          img{
            /*width: 100%;*/
            height: 100%;
            background-size: 100%;
          }
        }
      }
    }
  }
</style>

